<template>
  <div class="boxbox">
    <div class="box" v-for="(item, ind) in props.arrMsg" :key="ind">
      <div class="middle">
        <div class="title">{{ item.doctordescword }}</div>
        <van-text-ellipsis :content="item.doctordescword" rows="1.5" />
        <div class="bottom">
          <span style="margin-right: 10px">{{ item.doctorname }}</span>
          <span>{{ item.doctorcity }}</span>
          <span style="margin-left: 10px">{{ item.doctorstate }}</span>
          <span style="float: right; margin-right: 5px; color: #00be8c" @click="clickBtn(item)">文章</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
import {useRouter} from 'vue-router'
const props = defineProps({
  arrMsg: Array,
  kg:Boolean,
});

const router = useRouter();
const clickBtn = (item) => {
  console.log(item);
  // 跳转到文章详情页
  router.push({path:`/wz`,
    query: item
  });
};
</script>

<style scoped lang="scss">
.boxbox {
  width: 95%;
  border-radius: 15px;
  margin-left: 2.5%;

  .box {
    width: 100%;
    background-color: #fff;
    padding-top: 10px;

    .middle {
      width: 100%;
      padding: 0 10px;
      border-bottom: 1px solid #e3e3e3;

      .title {
        font-size: 0.35rem;
        height: 20px; // 设置高度
        width: 50%;
        overflow: hidden; // 超出部分隐藏
        margin-bottom: 10px;
      }
    }

    .bottom {
      color: #999;
      margin-top: 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
